<div>
    <div class="row">
        <div class="col-md-4 resource-name">{{resource.def.name}}</div>
        <div class="col-md-1 text-muted small">{{resource.path}}</div>
        <div class="col-md-1 text-muted small"><span class="glyphicon glyphicon-eye-open"
                                                     ng-if="resource.observed"></span></div>
        <div class="col-md-3">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group" ng-show="readable()">
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.observe.status == null,
								'btn-info': resource.observe.status == 'TIMEOUT',
								'btn-danger': resource.observe.status == 'ERROR',
								'btn-warning': resource.observe.status == 'INVALID',
								'btn-success': resource.observe.status == 'SUCCESS' }"
                            ng-click="resource.observe.status = null; startObserve()"
                            tooltip-animation="false" tooltip-append-to-body="true"
                            tooltip-html-unsafe={{resource.observe.tooltip}} tooltip-placement="right"
                            type="button">Observe <span
                            class="glyphicon glyphicon-play"></span></button>
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.observe.stop == null,
								'btn-success': resource.observe.stop == 'success' }" ng-click="stopObserve()"
                            type="button"><span
                            class="glyphicon glyphicon-stop"></span></button>
                </div>
                <div class="btn-group" ng-show="readable()">
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.read.status == null,
								'btn-info': resource.read.status == 'TIMEOUT',
								'btn-danger': resource.read.status == 'ERROR',
								'btn-warning': resource.read.status == 'INVALID',
								'btn-success': resource.read.status == 'SUCCESS' }"
                            ng-click="resource.read.status = null; read()"
                            tooltip-animation="false" tooltip-append-to-body="true"
                            tooltip-html-unsafe={{resource.read.tooltip}} tooltip-placement="right"
                            type="button">Read
                    </button>
                </div>
                <div class="btn-group" ng-show="writable()">
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.write.status == null,
								'btn-info': resource.write.status == 'TIMEOUT',
								'btn-danger': resource.write.status == 'ERROR',
								'btn-warning': resource.write.status == 'INVALID',
								'btn-success': resource.write.status == 'SUCCESS' }"
                            ng-click="resource.write.status = null; write()"
                            tooltip-animation="false" tooltip-append-to-body="true"
                            tooltip-html-unsafe={{resource.write.tooltip}} tooltip-placement="right"
                            type="button">Write
                    </button>
                </div>
                <div class="btn-group" ng-show="executable()">
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.exec.status == null,
								'btn-info': resource.exec.status == 'TIMEOUT',
								'btn-danger': resource.exec.status == 'ERROR',
								'btn-warning': resource.exec.status == 'INVALID',
								'btn-success': resource.exec.status == 'SUCCESS' }"
                            ng-click="resource.exec.status = null; exec();"
                            tooltip-animation="false" tooltip-append-to-body="true"
                            tooltip-html-unsafe={{resource.exec.tooltip}} tooltip-placement="right"
                            type="button">Exec
                    </button>
                    <button ng-class="{
								'btn': true,
								'btn-xs': true,
								'btn-default': resource.exec.status == null,
								'btn-info': resource.exec.status == 'TIMEOUT',
								'btn-danger': resource.exec.status == 'ERROR',
								'btn-warning': resource.exec.status == 'INVALID',
								'btn-success': resource.exec.status == 'SUCCESS' }"
                            ng-click="resource.exec.status = null; execWithParams();"
                            tooltip-animation="false" tooltip-append-to-body="true"
                            tooltip-html-unsafe={{resource.execwithparams.tooltip}} tooltip-placement="right"
                            type="button"><span
                            class="glyphicon glyphicon-cog"></span></button>
                </div>
            </div>
        </div>
        <div ng-class="{
				'col-md-3': true,
				'resource-value': true,
				'resource-value-supposed': resource.valuesupposed}"
        ">
        <span tooltip="{{resource.tooltip}}" tooltip-animation="false">{{display(resource)}}</span>
    </div>
</div>
</div>
